<!DOCTYPE html>
<html>
<head>
<title>安全安全巡查</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta charset="utf-8" />
    <link rel="stylesheet" href="css/weui.css"/>
    <link rel="stylesheet" href="css/example.css"/>
    <link rel="stylesheet" href="css/jquery-weui.css">
</head>
<body>
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">地址查询</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="number" pattern="[0-9]*" placeholder=""/>   
                </div>
                <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">查询</a>
            </div>
        </div>
        <div class="weui-pull-to-refresh__layer">
        <div class='weui-pull-to-refresh__arrow'></div>
        <div class='weui-pull-to-refresh__preloader'></div>
        <div class="down">下拉刷新</div>
        <div class="up">释放刷新</div>
        <div class="refresh">正在刷新</div>
        </div>

        <ul>
            <li>
                <div class="single-mode">
                    <div class="img-left">
                 <img src="http://p9.pstatp.com/list/190x124/31d900043a0b9e1116d0" class="img"/>
                    </div>
                </div>  
                 <div class="text-right">
                    <div class="single-inner">
                        <div class="title">麻纱桥21号</div>
                        <div>危旧房屋，住房不搬迁</div>
                        <div>上一次检查时点：5天前</div>
                    </div>
                </div>
            </li>
        </ul>
        <input type="file" style="/* visibility: hidden */" capture="camera" accept="image/*,video/*" name="" value="" >
</body>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js"></script>
<script>
      $(document.body).pullToRefresh().on("pull-to-refresh", function() {
        setTimeout(function() {
           $("ul").append($("ul").clone(true));
          $(document.body).pullToRefreshDone();
        }, 2000);
      });

    </script>
<style>
ul{
    list-style:none;
    border-bottom: 1px solid #e8e8e8;
}
li{
    margin: 0px;
    padding: 0px;
    height: 123px;
    padding: 10px 0;
    border-bottom: 1px solid #ffffff;
    background-color: white;
    display: block;
    zoom: 1;
}
.single-mode{
    position: relative;
    float: left;
    background-color: #ffffff;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 0px;
}
.img{
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    transition: all .5s ease-out .1s;
}
.img-left{
    width: 158px;
    height: 102px;
    margin-right: 16px;
}
.text-right{
    height: 100%;
    overflow: hidden;
}
.single-inner{
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}
.title{
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 4px;
    font-weight: 700;
    max-height: 52px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
</html>